<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box1 {
            width: 500px;
            display: flex;
            /* justify-content: space-between; */
            /* background-color: blueviolet; */
        }

        img {
            height: 50px;
            width: 50px;
            border-radius: 25px;
            transition: all 20px;
        }

        textarea {
            width: 300px;
            height: 50px;
            transition: all 0.7s;
        }

        textarea:focus {
            height: 100px;
        }

        .sp1 {
            margin-left: 300px;
            opacity: 0;
            transition: all 0.7s;
        }

        .box2 {
            width: 500px;
            /* background-color: antiquewhite; */
            border: 2px solid pink;
            border-radius: 25px;
            display: none;
        }

        .box2 span {
            display: flex;
            margin: 0 0 0 20px;
        }
    </style>

</head>

<body>
    <div class="box1">
        <img src="./../images/course01.png" alt="">
        <textarea name="" id="" placeholder="发一条友善的评论"></textarea>
        <button>
            发布
        </button>
    </div>
    <span class="sp1">
        0/200字
    </span>
    <div class="box2">
        <span style="color: purple;">原神</span>
        <span class="sp2">评论</span>
        <span class="sp3">时间</span>
    </div>
    <script>
        const tx = document.querySelector('textarea')
        const sp = document.querySelector('.sp1')
        const sp2 = document.querySelector('.sp2')
        const box2 = document.querySelector('.box2')
        tx.addEventListener('input', function () {
            sp.innerHTML = `${tx.value.length}/200字`
        })
        tx.addEventListener('focus', function () {
            sp.style.opacity = 1
        })
        tx.addEventListener('blur', function () {
            sp.style.opacity = 0
        })
        tx.addEventListener('keyup', function (e) {
            sp2.innerHTML = tx.value
            if (e.key === 'Enter') {
                
                box2.style.display = 'block'
                tx.value = ''
                sp.innerHTML = '0/200字'
            }
        })
    </script>
</body>

</html>